<template>
  <div class="roster">
    <rosterDimission v-if="isDimission" :goDimission='goDimission' />
    <div v-else>
      <ul class="roster-header">
        <li class="roster-header-top">
          <div class="item" @click="add(3)">
            <img src="../../../assets/home/hmc_yuangongdangan.png" />
            <span>员工档案字段管理</span>
          </div >
          <div class="item" @click="add(1)">
            <img src="../../../assets/home/hmc_xinzeng.png" />
            <span>单个新增加员工</span>
          </div>
          <div class="item" @click="add(2)">
            <img src="../../../assets/home/gmc_piliangshangchuan.png" />
            <span>批量上传员工</span>
          </div>
          <div class="item" @click='goDimission(true)'>
              <img src="../../../assets/home/gmc_piliangshangchuan.png" />
              <span>离职员工管理</span>
          </div>
        </li>
        <li class="roster-header-mian">
          <el-form class="roster-from" label-width="80px" :model="formLabelAlign">
            <el-form-item label="搜索员工">
              <el-input v-model="formLabelAlign.name" placeholder="请输入员工姓名"></el-input>
            </el-form-item>
            <el-form-item label="选择公司">
              <el-select v-model="company" placeholder="请选择公司">
                <el-option
                  v-for="item in companyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择部门">
              <el-select v-model="branch" placeholder="请选择部门">
                <el-option
                  v-for="item in branchList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入职日期">
              <el-date-picker v-model="time" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item class="ob">
              <el-button type="primary" class="red-b" @click="searchData()"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </li>
      </ul>
      <rosterUser />
    </div>
  </div>
</template>

<script>
import rosterUser from './rosterUser.vue'
import rosterDimission from './rosterDimission.vue'
export default {
  props:['goPath','activeName'],
  components:{rosterUser,rosterDimission},
  data() {
    return {
      formLabelAlign: {
        name: "",
      },
      time: "", //入职时间
      companyList: [
        { value: "sz", label: "深圳公司" },
        { value: "sbj", label: "北京公司" },
      ],
      branchList: [
        { value: "s1z", label: "深圳公2司" },
        { value: "sb2j", label: "北京3公司" },
      ],
      branch: "", //部门
      company: "", //公司
      isDimission:false,//是否显示离职列表
    };
  },
  methods: {
    //点击条件搜索
    async searchData() {
      let startTime;
      let endTime;
      if (this.selectDate) {
        let str = this.selectDate;
        startTime = str[0]; //开始时间
        endTime = str[1]; //结束时间
        startTime = this.publicFun.formatdate(startTime);
        endTime = this.publicFun.formatdate(endTime);
      }
      let searchList = {
        startTime,
        endTime,
        groupId: this.groupCondition.groupId,
        timeType: this.isTime,
        goodsName: this.groupCondition.name,
        pageSize: this.paging.pageSize,
        pageNum: this.paging.pageNum,
        groupStatus: 2,
      };
      // let result = await getGroupList(searchList);
      // if (result.code == 200) {
      //   this.paging.total = result.data.total;
      //   this.paging.pageSize = result.data.pageSize;
      //   this.paging.pageNum = result.data.pageNum;
      //   this.paging.pages = result.data.pages;
      //   this.groupData = result.data.rows;
      // }
    },
    goDimission(val){
      this.isDimission = val
      // this.changeRoster(1)
    },
    //跳转新增页面
    add(val){
      if(val == 3){
        this.goPath(val)
      }else{
        this.goPath(val,'name')
      }
    },
  },
  watch:{
    //监控父级传递的数值，根据数字判断是否切换表格
    activeName(val,old){
      this.isDimission =false
    },
  }
};
</script>

<style>
</style>